<template>
  <a-spin :spinning="loading" class="flex h-full pt-40">
    <a-card class="flex-1 overflow-hidden" :body-style="{ padding: '0 8px', height: '100%', overflow: 'hidden' }">
      <div class="flex justify-between">
        <div></div>
        <div>
          <template v-if="formState.status !== 1">
            <a-button class="mr-2" @click="onSubmit(1)">提交</a-button>
            <a-button class="mr-2" type="primary" @click="onSave">保存</a-button>
          </template>
          <template v-else>
            <a-button class="mr-2" type="primary" @click="onSubmit(0)">撤销提交</a-button>
            <a-button class="mr-2" @click="onPrintInfo">打印</a-button>
          </template>
          <div class="absolute -top-[9999px]">
            <a-button ref="printRef" v-print="{ id: 'printDom' }" type="primary">打印</a-button>
          </div>
        </div>
      </div>
      <div class="form-box" :class="{ 'h-calc-120': formHeight }">
        <a-form v-if="!loading" id="printDom" class="form-style flex justify-between flex-wrap px-8 mt-4 w-[1200px] mx-auto">
          <div class="w-full mt-4 flex justify-between">
            <a-form-item label="入院时情况" class="w-1/3 pr-5">
              <!-- <a-input v-model:value="formState.medfeePaymtdCode" :disabled="formState.status === 1" DT00289 value-key="mrCode"/> -->
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <a-form-item label="转入方式" class="w-1/3 pr-5">
            <SelectItem
              v-model:value="formState.medfeePaymtdCode"
              :disabled="formState.status === 1"
              type="DT00289"
              trigger="init"
              placeholder="请选择"
              @change="
                (_, $event) => {
                  formState.medfeePaymtdCode = $event.value
                  formState.medfeePaymtdName = $event.label
                }
              "
            />
          </a-form-item>
          <a-form-item label="" class="w-2/3 pr-5">
            <a-input v-model:value="formState.medcasno" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="转出方式" class="w-1/3 pr-5">
            <SelectItem
              v-model:value="formState.medfeePaymtdCode"
              :disabled="formState.status === 1"
              type="DT00289"
              trigger="init"
              placeholder="请选择"
              @change="
                (_, $event) => {
                  formState.medfeePaymtdCode = $event.value
                  formState.medfeePaymtdName = $event.label
                }
              "
            />
          </a-form-item>
          <a-form-item label="" class="w-2/3 pr-5">
            <a-input v-model:value="formState.medcasno" placeholder="请输入" />
          </a-form-item>
          <div class="flex w-full">
            <a-form-item label="日常生活能力评定量表(入院)得分">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="，日常生活能力评定量表(出院)得分">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
          </div>
          <a-form-item label="临床路径" class="w-1/3 pr-5">
            <!-- <a-input v-model:value="formState.medfeePaymtdCode" :disabled="formState.status === 1" DT00289 value-key="mrCode"/> -->
            <SelectItem
              v-model:value="formState.medfeePaymtdCode"
              :disabled="formState.status === 1"
              type="DT00289"
              trigger="init"
              placeholder="请选择"
              @change="
                (_, $event) => {
                  formState.medfeePaymtdCode = $event.value
                  formState.medfeePaymtdName = $event.label
                }
              "
            />
          </a-form-item>
          <div class="w-full flex">
            <a-form-item label="抗生素使用情况">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
            <a-form-item label="目的">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="方案">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
            <a-form-item label="使用天数">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="天" />
          </div>
          <div class="w-full flex">
            <a-form-item label="传染病报告">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="特级护理天数">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="天，一级护理">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="天，二级护理">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="天，三级护理">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="天" />
          </div>
          <div class="w-full flex">
            <a-form-item label="住院时间是否出现危重">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="是否计划二次手术">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="有创呼吸机使用时间">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="小时" />
          </div>
          <div class="w-full flex">
            <a-form-item label="住院过程中有无进入重症监护室">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="重症监护室名称">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[180px]" />
            </a-form-item>
            <a-form-item label="进入时间">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[180px]" />
            </a-form-item>
            <a-form-item label="转出时间">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[180px]" />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="重症监护室名称">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[180px]" />
            </a-form-item>
            <a-form-item label="进入时间">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[180px]" />
            </a-form-item>
            <a-form-item label="转出时间">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[180px]" />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="HBsAg">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="HIV-Ab">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="红细胞">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[100px]" />
            </a-form-item>
            <a-form-item label="单位，血小板">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[100px]" />
            </a-form-item>
            <a-form-item label="单位，血浆">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[100px]" />
            </a-form-item>
            <a-form-item label="单位，全血">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[100px]" />
            </a-form-item>
            <a-form-item label="单位，自体血回输">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[100px]" />
            </a-form-item>
            <a-form-item label="单位。" />
          </div>
          <div class="w-full flex">
            <a-form-item label="输血反应">
              <SelectItem
                v-model:value="formState.medfeePaymtdCode"
                :disabled="formState.status === 1"
                type="DT00289"
                trigger="init"
                class="w-[140px]"
                placeholder="请选择"
                @change="
                  (_, $event) => {
                    formState.medfeePaymtdCode = $event.value
                    formState.medfeePaymtdName = $event.label
                  }
                "
              />
            </a-form-item>
          </div>
          <div class="w-full flex">
            <a-form-item label="诊断符合情况：入院与出院">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="术前与术后">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
            <a-form-item label="临床与病理">
              <a-input v-model:value="formState.medcasno" placeholder="请输入" class="w-[140px]" />
            </a-form-item>
          </div>
        </a-form>
      </div>
    </a-card>
  </a-spin>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// import { message } from 'ant-design-vue'
// import { formatAmount } from '@/utils/format'
// import { post } from '@/utils/request'
// import { getSystemConfig } from '@/utils/systemConfig'
// import cofirmModal from '@/utils/confirm.js'

const loading = ref(false)
const printRef = ref(null)
const formState = ref({})
const props = defineProps({
  inplsh: {
    type: String,
    default: ''
  },
  formHeight: {
    type: Boolean,
    default: false
  }
})
onMounted(() => {
  props.inplsh
})
</script>
<style lang="less" scoped>
:deep(.workstation-tabs) {
  .ant-tabs-tab {
    padding: 12px 32px;
  }
  .ant-tabs-tab + .ant-tabs-tab {
    margin: 0 16px;
  }
}

// 病案管理
.h-calc-120 {
  height: calc(100vh - 120px) !important;
}

.form-box {
  height: calc(100vh - 255px);
  margin-bottom: 15px;
  overflow: auto;
}
.form-style {
  // height: calc(100vh - 100px);
  // overflow: auto;
  :deep(label) {
    align-items: flex-end;
    padding-top: 3px;
  }
  :deep(.ant-form-row) {
    margin-right: 24px;
  }
  :deep(.ant-input-suffix) {
    display: flex;
    align-items: flex-end;
    color: var(--disabled-text-color);
  }
  :deep(.ant-input-affix-wrapper) {
    padding: 0 !important;
  }
  :deep(.can-edit-cell) {
    .ant-select-selector {
      padding: 0 8px !important;
      border: 1px solid transparent !important;
      border-bottom-color: transparent !important;
    }
    .ant-select-selector:hover {
      border-color: var(--primary-color) !important;
    }
    .ant-input {
      padding: 0 8px !important;
    }
  }
  :deep(.ant-input) {
    padding: 9px 0 0 5px !important;
  }
  :deep(.ant-table-cell) {
    height: 36px;
  }
  :deep(.ant-form-item-control-input-content) {
    .ant-input-affix-wrapper,
    .ant-picker,
    .ant-input {
      &-focused {
        box-shadow: none !important;
      }
      border: none;
      border-radius: 0;
    }
    .ant-picker,
    .ant-input {
      &:focus {
        box-shadow: none !important;
      }
      border-bottom: 1px solid #333;
    }
    .ant-picker {
      width: 100%;
      padding: 10px 0 0 5px !important;
    }
  }
  :deep(.ant-select-selector) {
    padding: 4px 0 0 5px !important;
    border: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    box-shadow: none !important;
  }
  .table-select {
    :deep(.ant-select-selector) {
      border-bottom: none;
      &:hover {
        border: 1px solid var(--primary-color) !important;
      }
    }
  }
  .cost-label {
    :deep(.ant-form-item-label > label) {
      padding-bottom: 1px !important;
      color: red;
    }
    :deep(.ant-input) {
      color: red;
    }
  }
  :deep(.ant-input[disabled]) {
    color: #000;
    background-color: transparent;
  }
  :deep(.ant-input-affix-wrapper-disabled) {
    color: #000;
    background-color: transparent;
  }
  :deep(.ant-input-affix-wrapper[disabled]) {
    color: #000;
    background-color: transparent;
  }
  :deep(.ant-picker.ant-picker-disabled) {
    color: #000;
    background-color: transparent;
  }
  :deep(.ant-picker .ant-picker-input > input[disabled]) {
    color: #000;
    background-color: transparent;
  }
  :deep(.ant-select-disabled .ant-select-selector) {
    color: #000;
    background-color: transparent;
  }
}
#printDom {
  // border: 1px solid #00000080;
  border: 1px solid rgb(203 213 225);
  border-radius: 8px;
}
</style>
